<script setup>
  import { ref,onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { User, Lock, Unlock, CircleCheck } from '@element-plus/icons-vue'
  import { updateApi,queryInfoApi } from '@/api/emp';
  import { useRouter } from 'vue-router';
 
  const router=useRouter();
  const emp=ref({});
 
const searchEmp= async ()=>{
    if(localStorage.getItem('loginUser')){
        const loginUser=JSON.parse(localStorage.getItem('loginUser'));
        const result= await queryInfoApi(loginUser.id);
        emp.value=result.data;
    }else{
        ElMessage.error('请先登录');
    }
};


onMounted(()=>{
    searchEmp();
})


  const formref = ref();
  // 表单数据
  const form = ref({
    username: '',
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
  
  // 验证规则
  const validateConfirm = (rule, value, callback) => {
    if (value !== form.value.newPassword) {
      callback(new Error('两次输入的密码不一致'))
    } else {
      callback()
    }
  }
  // username验证规则
  const validateusername = (rule, value, callback) => {
    if (value !== emp.value?.username) {
      callback(new Error('用户名不匹配'))
    } else {
      callback()
    }
  }
  // 密码验证规则
  const validatepassword = (rule, value, callback) => {
    if (value !== emp.value?.password) {
      callback(new Error('密码不匹配'))
    } else {
      callback()
    }
  }

  const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      {validator: validateusername, trigger: 'blur' }
    ],
    oldPassword: [
      { required: true, message: '请输入旧密码', trigger: 'blur' },
      {validator: validatepassword, trigger: 'blur' }
    ],
    newPassword: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 8, message: '密码长度至少8位', trigger: 'blur' },
      { pattern: /^(?=.*[A-Za-z])(?=.*\d).+$/, 
        message: '需包含字母和数字', 
        trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请确认新密码', trigger: 'blur' },
      { validator: validateConfirm, trigger: 'blur' }
    ]
  }
  
  // 表单提交
  const submitForm = async () => {
     if(!formref.value) return; 
     formref.value.validate(async valid => {
        if (valid) {
           emp.value.password=form.value.newPassword;
            const result=await updateApi(emp.value);
            if(result.code){
                ElMessage.success("修改成功");
                resetForm();
                // 跳转到登录页
                localStorage.removeItem('loginUser');
                router.push('/login');
            }else{
                ElMessage.error(result.msg);
            }
        }
     })
  }
  
  // 表单重置
  const resetForm = () => {
    form.value = {
      username: '',
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
    if(formref.value){
        formref.value.resetFields();
    }
  }
  </script>

<template>
    <div class="password-container animate__animated animate__fadeIn">
      <!-- 渐变色标题 -->
      <h2 class="title-gradient">密码维护</h2>
      
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="formref"
        label-position="top"
        class="password-form"
      >
        <!-- 用户名输入 -->
        <el-form-item label="用户名" prop="username">
          <el-input 
            v-model="form.username"
            placeholder="请输入登录用户名"
            :prefix-icon="User"
          />
        </el-form-item>
  
        <!-- 原密码输入 -->
        <el-form-item label="原密码" prop="oldPassword">
          <el-input 
            v-model="form.oldPassword" 
            type="password" 
            show-password
            placeholder="请输入当前密码"
            :prefix-icon="Lock"
          />
        </el-form-item>
  
        <!-- 新密码输入 -->
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="form.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码"
            :prefix-icon="Unlock"
          />
        </el-form-item>
  
        <!-- 确认密码 -->
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            type="password"
            show-password
            placeholder="请再次输入新密码"
            :prefix-icon="CircleCheck"
          />
        </el-form-item>
  
        <!-- 操作按钮 -->
        <div class="form-actions">
          <el-button 
            type="primary" 
            @click="submitForm"
            class="submit-btn"
          >
            提交修改
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </div>
  </template>
  
  
  <style scoped>
  .password-container {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }
  
  .title-gradient {
    background: linear-gradient(135deg, #409eff, #79bbff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.8rem;
  }
  
  .password-form {
    padding: 1rem;
  }
  
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #606266;
  }
  
  .form-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
  }
  
  .submit-btn {
    transition: all 0.3s ease;
    padding: 12px 24px;
  }
  
  .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }
  </style>